<style type="text/css">
.exam_admin_tabs {
border: none;
background-image: none;
margin: 5px 0px 15px 0px;
padding: 3px;
background: #E9F4FA;
overflow: auto;
}
.exam_admin_tabs ul {
margin: 0px;
text-align: left;
font-weight: bold;
padding: 0;
float: left;
}
.exam_admin_tabs ul li {
padding: 0px;
font-size: 12px;
float: left;
}
.exam_admin_tabs ul li a {
padding: 5px 11px;
text-decoration: none;
color: #888;
border-bottom: none;
outline: none;
font-weight: bold;
float: left;
margin: 1px;
text-transform: capitalize;
}
.exam_admin_tabs ul li.active a {
background-color: white;
color: #444;
position: relative;
padding: 5px 9px;
float: left;
margin: 1px;  

border-top: 1px solid #ccc;
border-left: 1px solid #ccc;  
border-right: 1px solid #ccc;  
border-radius: 3px 3px 0px 0px;
-moz-border-radius: 3px 3px 0px 0px;
-webkit-border-radius: 3px 3px 0px 0px;       
}
</style>

<h2><?php echo $this->translate("Exam") ?></h2>
<?php if( count($this->navigation) ): ?>
  <div class='exam_admin_tabs'>
    <?php      
      echo $this->navigation()->menu()->setContainer($this->navigation)->render()
    ?>
  </div>
<?php endif; ?>

<div style="font-weight: bold;">
	<?php echo $this->translate('Select category'); ?> (<a href="javascript:;" onclick="rebuildTree();"><?php echo $this->translate('Reload'); ?></a>)
</div>
<div style="margin: 5px;">
	<div style="float: left;">			
		<select id="allCategories"></select>
		<script type="text/javascript">	
		treeObj = {
				id: "allCategories",
				treeAJAX: {
					link: "<?php echo Zend_Controller_Front::getInstance()->getRouter()->assemble(array(
								 
								'action' => 'xmlcategories',
								'root'	=>	1
							), 'exam_general', true);?>"
				},
				canResizeWidth: true,
				canResizeHeight: true,
				canStick: true,
				isStuck: true,
				showAfterLoad: true,
				skinName: "LightBlue",
				size: {
					divOptMaxWidth: 800,
					slWidth: 500
				}
			};
		TreeBox.startZIndex = 0;
		TreeBox.init();
		TreeBox.build(treeObj);

		function changeTreeSelected(value) {
			treeObj.treeAJAX.link = '<?php echo $this->url(array('controller' => 'index', 'action' => 'xmlcategories', 'root'	=>	1), 'exam_general', true);?>' + '/selected/' + value;
			TreeBox.build(treeObj);
		}
		function popup(url) {
			Smoothbox.open(url + '/treeBox/' + document.getElementById('allCategories').value + '/format/smoothbox');
		}
		function rebuildTree() {
			TreeBox.rebuild("allCategories");
		}
		</script>
	</div>
	<div style="float: left; margin-left: 10px;">
		<a href="javascript:;" onclick="popup('<?php echo $this->url(array('action' => 'create'));?>');"><?php echo $this->translate('Create sub category');?></a>
		<br />
		<br />
		<a href="javascript:;" onclick="if (document.getElementById('allCategories').value != 0) {popup('<?php echo $this->url(array('action' => 'edit'));?>');}"><?php echo $this->translate('Edit category');?></a>
		<br />
		<br />
		<a href="javascript:;" onclick="if (document.getElementById('allCategories').value != 0) {popup('<?php echo $this->url(array('action' => 'delete'));?>');}"><?php echo $this->translate('Delete category');?></a>
		
	</div>
	<div style="clear: both;"></div>
</div>